<template>
	<view class="pd16_15">
		<view class="box noshadow pd16_15" v-if="iskq==1">
			<view class="flex space cl-main">
				<text class="ft14 ftw600 cl-main friend-title">{{$t('Direct friend')}}({{total}})</text>
				<text class="ft12">{{$t('Team size')}} {{teamnum}}</text>
			</view>
			<view class="bd-line mt16"></view>
			<view>
				<block v-for="(value,key) in data" :key="key">
					<view class="flex alcenter space mt12">
						<view class="flex alcenter">
							<view class="member-face">
								<image class="face" :src="value.avatar?value.avatar:value.url"></image>
							</view>
							<view class="ml15">
								<view class="ft16 cl-main">{{ value.nickname || '' }}</view>
								<view class="mt12 ft12 cl-notice">{{value.createtime || '' }}</view>
							</view>
						</view>
						<view class="ml15 level">
							<view v-if="value.group_id >1" class="ft12 cl-green">{{$t('vip.level2')}}</view>
							<view v-else class="ft12">{{$t('vip.level1')}}</view>
						</view>
					</view>
				</block>
			</view>
			<uni-pagination @change="onPageChange" v-if="total>pageSize" show-icon="true" :pageSize="pageSize"
				:total="total" current="1"></uni-pagination>
		</view>
		<view class="box noshadow pd16_15" v-else>
			<view class="ft16 ftw600 cl-main">{{$t('You have no permission')}}</view>
		</view>
		<dialog-qrcode v-if="showQrcode" @closed="showQrcode = false"></dialog-qrcode>
	</view>

</template>

<script>
	import uniPagination from '@/components/uni-pagination/uni-pagination.vue'
	export default {
		components: {
			uniPagination
		},
		data() {
			return {
				data: [],
				iskq: 0,
				showQrcode: false,
				total: 0,
				teamnum: 0,
				pageSize: 10,
			}
		},
		onLoad() {
			this.getList(0)
			if (uni.getStorageSync("config").site.iskq) {
				this.iskq = uni.getStorageSync("config").site.iskq;
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('fenxiao.team')
			});
		},
		methods: {
			showQrcodeop() {
				this.showQrcode = true
			},
			onPageChange(e) {
				this.getList(e.current - 1)
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100
				});
			},
			async getList(offset) {
				let data = {};
				data.limit = this.pageSize
				data.offset = this.pageSize * offset
				if (uni.getStorageSync("userinfo").token) {
					data.token = uni.getStorageSync("userinfo").token
					data.uid = uni.getStorageSync("userinfo").id
				}
				let [err, res] = await this.$httpas.get('/api/user/mytuandui', data);
				if (res.data.total) {
					this.data = res.data.rows
					this.total = res.data.total
					this.teamnum = res.data.teamnum
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pd16_15 {
		.cl-main {
			color: #3D3D3D;
		}
	}
</style>

<style>
	.member-face {
		position: relative;
	}

	.member-face .vip-level {
		height: 48rpx;
		width: 48rpx;
		position: absolute;
		left: calc(50% - 24rpx);
		top: -30rpx;
	}

	.member-face .face {
		width: 100rpx;
		height: 100rpx;
		border: 6rpx solid #FFFFFF;
		background: #FFFFFF;
		border-radius: 100rpx;
		box-shadow: 0rpx 24rpx 48rpx 0rpx rgba(197, 202, 219, 0.3);
	}

	.level {
		text-align: right;
		color: #666666;
		border-radius: 100rpx;
		padding: 8rpx;
		width: 200rpx;
	}
</style>